<template>
  <view class="container">
    <!-- 顶部状态栏 -->
    <view class="status-bar">
      <view class="status-bar-left">{{ currentTime }}</view>
      <view class="status-bar-right">
        <text class="iconfont icon-signal"></text>
        <text class="iconfont icon-wifi"></text>
        <text class="iconfont icon-battery-full"></text>
      </view>
    </view>
    
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-bar-title">文件管理器</view>
      <view class="nav-bar-actions">
        <text class="iconfont icon-bell" @click="showNotifications"></text>
        <text class="iconfont icon-cloud-upload" @click="uploadFile"></text>
      </view>
    </view>
    
    <!-- 应用内容区 -->
    <scroll-view class="app-content" scroll-y enable-flex refresher-enabled
      :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
      <!-- 存储信息 -->
      <view class="storage-section">
        <view class="section-title">存储空间</view>
        <view class="storage-bar">
          <view class="progress-bar">
            <view class="progress-bar-fill" :style="{ width: '45%' }"></view>
          </view>
          <view class="storage-info">
            <text>已用: 116GB</text>
            <text>总共: 256GB</text>
          </view>
        </view>
      </view>
      
      <!-- 快速访问 -->
      <view class="section-title">快速访问</view>
      <scroll-view class="quick-access" scroll-x show-scrollbar="false" enable-flex>
        <view class="quick-access-item" v-for="(item, index) in quickAccessItems" :key="index" @click="navigateToCategory(item.type)">
          <view class="quick-access-icon" :style="{ backgroundColor: item.bgColor }">
            <text class="iconfont" :class="item.icon" :style="{ color: item.iconColor }"></text>
          </view>
          <view class="quick-access-label">{{ item.label }}</view>
        </view>
      </scroll-view>
      
      <!-- 最近文件 -->
      <view class="recent-files-section">
        <view class="recent-files-header">
          <view class="section-title">最近文件</view>
          <text class="view-all" @click="viewAllFiles">查看全部</text>
        </view>
        
        <view class="recent-files-list">
          <view class="list-item" v-for="(file, index) in recentFiles" :key="index" @click="openFile(file)">
            <view class="list-item-icon" :style="{ backgroundColor: file.bgColor }">
              <text class="iconfont" :class="file.icon" :style="{ color: file.iconColor }"></text>
            </view>
            <view class="list-item-content">
              <view class="list-item-title">{{ file.name }}</view>
              <view class="list-item-subtitle">{{ file.size }} • {{ file.time }}</view>
            </view>
            <text class="iconfont icon-more-vertical" @click.stop="showFileOptions(file)"></text>
          </view>
        </view>
      </view>
      
      <!-- 底部占位区域，防止内容被TabBar遮挡 -->
      <view class="tab-bar-placeholder"></view>
    </scroll-view>
    
    <!-- 使用TabBar组件 -->
    <tab-bar :active-tab="currentTab" @change="handleTabChange" />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import TabBar from '@/components/TabBar.vue';
import { navigateToTab } from '@/utils/navigation';

// 下拉刷新状态
const isRefreshing = ref(false);

// 当前时间
const currentTime = ref('9:41');

// 底部标签当前选中项
const currentTab = ref('home');

// 快速访问项
const quickAccessItems = ref([
  {
    type: 'photos',
    label: '照片',
    icon: 'icon-image',
    bgColor: '#E1F5FE',
    iconColor: '#03A9F4'
  },
  {
    type: 'videos',
    label: '视频',
    icon: 'icon-video',
    bgColor: '#E8F5E9',
    iconColor: '#4CAF50'
  },
  {
    type: 'music',
    label: '音乐',
    icon: 'icon-music',
    bgColor: '#FFF3E0',
    iconColor: '#FF9800'
  },
  {
    type: 'documents',
    label: '文档',
    icon: 'icon-file-text',
    bgColor: '#E8EAF6',
    iconColor: '#3F51B5'
  },
  {
    type: 'downloads',
    label: '下载',
    icon: 'icon-file-text',
    bgColor: '#F3E5F5',
    iconColor: '#9C27B0'
  },
  {
    type: 'favorites',
    label: '收藏',
    icon: 'icon-file-text',
    bgColor: '#FFEBEE',
    iconColor: '#F44336'
  }
]);

// 最近文件列表
const recentFiles = ref([
  {
    id: 1,
    name: '家庭照片.jpg',
    size: '2.5 MB',
    time: '刚刚',
    type: 'image',
    icon: 'icon-image',
    bgColor: '#E1F5FE',
    iconColor: '#03A9F4'
  },
  {
    id: 2,
    name: '工作报告.docx',
    size: '1.2 MB',
    time: '2小时前',
    type: 'document',
    icon: 'icon-file-word',
    bgColor: '#E8EAF6',
    iconColor: '#3F51B5'
  }
]);

// 更新时间的函数
const updateTime = () => {
  const now = new Date();
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  currentTime.value = `${hours}:${minutes}`;
};

// 定时器
let timer: number;

// 页面加载时启动定时器
onMounted(() => {
  updateTime(); // 初始更新一次
  timer = setInterval(updateTime, 60000); // 每分钟更新一次
});

// 页面卸载时清除定时器
onUnmounted(() => {
  clearInterval(timer);
});

// 处理TabBar组件的切换事件
const handleTabChange = (tab: string) => {
  if (tab !== 'home') {
    // 使用导航工具跳转到对应页面
    navigateToTab(tab);
  }
};

// 导航到分类页面
const navigateToCategory = (type: string) => {
  console.log(`Navigate to ${type}`);
  uni.navigateTo({
    url: `/pages/category/index?type=${type}`
  });
};

// 查看所有文件
const viewAllFiles = () => {
  console.log('View all files');
  uni.navigateTo({
    url: '/pages/all-files/index'
  });
};

// 打开文件
const openFile = (file: any) => {
  console.log('Open file', file);
  // 根据文件类型打开相应的预览
  if (file.type === 'image') {
    uni.previewImage({
      urls: [`/static/images/${file.name}`]
    });
  } else {
    uni.showToast({
      title: `打开文件: ${file.name}`,
      icon: 'none'
    });
  }
};

// 显示文件操作选项
const showFileOptions = (file: any) => {
  console.log('Show options for file', file);
  uni.showActionSheet({
    itemList: ['分享', '重命名', '移动到', '删除'],
    success: (res) => {
      console.log(`选择了第${res.tapIndex + 1}个选项`);
    }
  });
};

// 显示通知
const showNotifications = () => {
  uni.showToast({
    title: '暂无新通知',
    icon: 'none'
  });
};

// 上传文件
const uploadFile = () => {
  uni.showToast({
    title: '文件上传功能开发中',
    icon: 'none'
  });
};

// 下拉刷新处理
const onRefresh = () => {
  isRefreshing.value = true;
  
  // 模拟刷新数据
  setTimeout(() => {
    // 更新最近文件列表
    const newFile = {
      id: Math.floor(Math.random() * 1000),
      name: `新文档_${new Date().getTime()}.pdf`,
      size: '3.7 MB',
      time: '刚刚',
      type: 'document',
      icon: 'icon-file-text',
      bgColor: '#FFF3E0',
      iconColor: '#FF9800'
    };
    
    recentFiles.value = [newFile, ...recentFiles.value];
    
    // 结束刷新状态
    isRefreshing.value = false;
    
    uni.showToast({
      title: '刷新成功',
      icon: 'success'
    });
  }, 1500);
};
</script>

<style>
/* 全局样式变量 */
page {
  --primary-color: #2196F3;
  --secondary-color: #03A9F4;
  --accent-color: #FF9800;
  --text-color: #333;
  --light-gray: #f5f5f5;
  --medium-gray: #e0e0e0;
  --dark-gray: #9e9e9e;
  --danger-color: #f44336;
  --success-color: #4CAF50;
  background-color: #fff;
  color: var(--text-color);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
}

/* 顶部状态栏样式 */
.status-bar {
  height: 60rpx;
  width: 100%;
  background-color: #000;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  font-size: 24rpx;
  /* 适配顶部安全区 */
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

.status-bar-right {
  display: flex;
  align-items: center;
}

.status-bar-right text {
  margin-left: 8rpx;
  font-size: 24rpx;
}

/* 导航栏样式 */
.nav-bar {
  height: 80rpx;
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24rpx;
  border-bottom: 1px solid var(--medium-gray);
}

.nav-bar-title {
  font-size: 32rpx;
  font-weight: 600;
}

.nav-bar-actions {
  display: flex;
  align-items: center;
}

.nav-bar-actions text {
  margin-left: 20rpx;
  font-size: 36rpx;
}

/* 应用内容区样式 */
.app-content {
  flex: 1;
  overflow-y: auto;
}

/* 存储信息样式 */
.storage-section {
  padding: 20rpx;
}

.progress-bar {
  height: 12rpx;
  background-color: var(--medium-gray);
  border-radius: 6rpx;
  width: 100%;
  margin: 12rpx 0;
}

.progress-bar-fill {
  height: 100%;
  background-color: var(--primary-color);
  border-radius: 6rpx;
}

.storage-info {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  margin-top: 6rpx;
}

/* 快速访问样式 */
.section-title {
  font-size: 30rpx;
  font-weight: 600;
  margin: 24rpx 20rpx 12rpx;
}

.quick-access {
  white-space: nowrap;
  padding: 0 10rpx;
}

.quick-access-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0 12rpx;
  width: 100rpx;
}

.quick-access-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8rpx;
}

.quick-access-icon text {
  font-size: 40rpx;
}

.quick-access-label {
  font-size: 20rpx;
  color: var(--text-color);
  text-align: center;
}

/* 最近文件样式 */
.recent-files-section {
  margin-top: 30rpx;
}

.recent-files-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
}

.view-all {
  color: var(--primary-color);
  font-size: 24rpx;
}

.list-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1px solid var(--medium-gray);
}

.list-item:last-child {
  border-bottom: none;
}

.list-item-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 16rpx;
  border-radius: 12rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.list-item-icon text {
  font-size: 32rpx;
}

.list-item-content {
  flex: 1;
}

.list-item-title {
  font-weight: 500;
  margin-bottom: 4rpx;
  font-size: 26rpx;
}

.list-item-subtitle {
  color: var(--dark-gray);
  font-size: 22rpx;
}

/* 底部占位区域 */
.tab-bar-placeholder {
  height: 100rpx;
  /* 适配底部安全区 */
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}
</style>
